<template>
  <div class="tables-container">
    <!-- 第一个表格 -->
    <div class="table-wrapper">
      <!-- 表格容器用于滚动 -->
      <div class="table-scroll-container">
        <table border="1" cellpadding="0" cellspacing="0">
          <thead>
            <tr>
              <th 
                :style="{width: columnWidths.table1[0] + 'px'}" 
                class="resizable-header"
                :data-table="1"
                :data-col="0"
              >
                尺寸型号
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
              <th 
                :style="{width: columnWidths.table1[1] + 'px'}" 
                class="resizable-header"
                :data-table="1"
                :data-col="1"
              >
                倒角前值1
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
              <th 
                :style="{width: columnWidths.table1[2] + 'px'}" 
                class="resizable-header"
                :data-table="1"
                :data-col="2"
              >
                倒角前值2
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
              <th 
                :style="{width: columnWidths.table1[3] + 'px'}" 
                class="resizable-header"
                :data-table="1"
                :data-col="3"
              >
                外观1
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
              <th 
                :style="{width: columnWidths.table1[4] + 'px'}" 
                class="resizable-header"
                :data-table="1"
                :data-col="4"
              >
                外观2
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
              <th 
                :style="{width: columnWidths.table1[5] + 'px'}" 
                class="resizable-header"
                :data-table="1"
                :data-col="5"
              >
                倒角后值1
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
              <th 
                :style="{width: columnWidths.table1[6] + 'px'}" 
                class="resizable-header"
                :data-table="1"
                :data-col="6"
              >
                倒角后值2
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
              <th 
                :style="{width: columnWidths.table1[7] + 'px'}" 
                class="resizable-header"
                :data-table="1"
                :data-col="7"
              >
                倒角下尺寸
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
              <th 
                :style="{width: columnWidths.table1[8] + 'px'}" 
                class="resizable-header"
                :data-table="1"
                :data-col="8"
              >
                R值
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
            </tr>
          </thead>
          <tbody>
            <!-- 数据行 -->
            <tr>
              <td :rowspan="tableData1.length" class="merged-cell">
                <input 
                  type="text" 
                  v-model="mergedData1.sizeModel" 
                  class="cell-input merged-input"
                  placeholder="输入型号"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="tableData1[0].beforeChamfer1" 
                  class="cell-input"
                  placeholder="值1"
                  @keyup.enter="handleEnter('table1', 0, 'beforeChamfer1')"
                  @input="calculateStatistics('table1')"
                  :ref="(el) => setRef('table1', 0, 'beforeChamfer1', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="tableData1[0].beforeChamfer2" 
                  class="cell-input"
                  placeholder="值2"
                  @keyup.enter="handleEnter('table1', 0, 'beforeChamfer2')"
                  @input="calculateStatistics('table1')"
                  :ref="(el) => setRef('table1', 0, 'beforeChamfer2', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="tableData1[0].appearance1" 
                  class="cell-input"
                  placeholder="外观1"
                  @keyup.enter="handleEnter('table1', 0, 'appearance1')"
                  :ref="(el) => setRef('table1', 0, 'appearance1', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="tableData1[0].appearance2" 
                  class="cell-input"
                  placeholder="外观2"
                  @keyup.enter="handleEnter('table1', 0, 'appearance2')"
                  :ref="(el) => setRef('table1', 0, 'appearance2', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="tableData1[0].afterChamfer1" 
                  class="cell-input"
                  placeholder="值1"
                  @keyup.enter="handleEnter('table1', 0, 'afterChamfer1')"
                  @input="calculateStatistics('table1')"
                  :ref="(el) => setRef('table1', 0, 'afterChamfer1', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="tableData1[0].afterChamfer2" 
                  class="cell-input"
                  placeholder="值2"
                  @keyup.enter="handleEnter('table1', 0, 'afterChamfer2')"
                  @input="calculateStatistics('table1')"
                  :ref="(el) => setRef('table1', 0, 'afterChamfer2', el)"
                >
              </td>
              <td :rowspan="tableData1.length" class="merged-cell">
                <input 
                  type="text" 
                  v-model="mergedData1.chamferLower" 
                  class="cell-input merged-input"
                  placeholder="尺寸"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="tableData1[0].rValue" 
                  class="cell-input"
                  placeholder="R"
                  @keyup.enter="handleEnter('table1', 0, 'rValue')"
                  :ref="(el) => setRef('table1', 0, 'rValue', el)"
                >
              </td>
            </tr>
            
            <tr v-for="(row, rowIndex) in tableData1.slice(1)" :key="'table1-' + rowIndex">
              <td>
                <input 
                  type="text" 
                  v-model="row.beforeChamfer1" 
                  class="cell-input"
                  placeholder="值1"
                  @keyup.enter="handleEnter('table1', rowIndex + 1, 'beforeChamfer1')"
                  @input="calculateStatistics('table1')"
                  :ref="(el) => setRef('table1', rowIndex + 1, 'beforeChamfer1', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="row.beforeChamfer2" 
                  class="cell-input"
                  placeholder="值2"
                  @keyup.enter="handleEnter('table1', rowIndex + 1, 'beforeChamfer2')"
                  @input="calculateStatistics('table1')"
                  :ref="(el) => setRef('table1', rowIndex + 1, 'beforeChamfer2', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="row.appearance1" 
                  class="cell-input"
                  placeholder="外观1"
                  @keyup.enter="handleEnter('table1', rowIndex + 1, 'appearance1')"
                  :ref="(el) => setRef('table1', rowIndex + 1, 'appearance1', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="row.appearance2" 
                  class="cell-input"
                  placeholder="外观2"
                  @keyup.enter="handleEnter('table1', rowIndex + 1, 'appearance2')"
                  :ref="(el) => setRef('table1', rowIndex + 1, 'appearance2', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="row.afterChamfer1" 
                  class="cell-input"
                  placeholder="值1"
                  @keyup.enter="handleEnter('table1', rowIndex + 1, 'afterChamfer1')"
                  @input="calculateStatistics('table1')"
                  :ref="(el) => setRef('table1', rowIndex + 1, 'afterChamfer1', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="row.afterChamfer2" 
                  class="cell-input"
                  placeholder="值2"
                  @keyup.enter="handleEnter('table1', rowIndex + 1, 'afterChamfer2')"
                  @input="calculateStatistics('table1')"
                  :ref="(el) => setRef('table1', rowIndex + 1, 'afterChamfer2', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="row.rValue" 
                  class="cell-input"
                  placeholder="R"
                  @keyup.enter="handleEnter('table1', rowIndex + 1, 'rValue')"
                  :ref="(el) => setRef('table1', rowIndex + 1, 'rValue', el)"
                >
              </td>
            </tr>

            <!-- 统计行 -->
            <tr class="stats-row">
              <td></td>
              <td colspan="2" class="before-stats">
                <div class="stat-group">
                  <span class="stat-item">均值: {{ stats.table1.before.mean.toFixed(2) }}</span>
                  <span class="stat-item">最大值: {{ stats.table1.before.max }}</span>
                  <span class="stat-item">最小值: {{ stats.table1.before.min }}</span>
                </div>
              </td>
              <td colspan="2"></td>
              <td colspan="2" class="after-stats">
                <div class="stat-group">
                  <span class="stat-item">均值: {{ stats.table1.after.mean.toFixed(2) }}</span>
                  <span class="stat-item">最大值: {{ stats.table1.after.max }}</span>
                  <span class="stat-item">最小值: {{ stats.table1.after.min }}</span>
                </div>
              </td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <div class="table-actions">
        <button @click="addRow('table1')" class="action-btn add-btn">添加行</button>
        <button @click="removeRow('table1')" class="action-btn remove-btn" :disabled="tableData1.length <= 1">删除最后一行</button>
      </div>
    </div>

    <!-- 第二个表格 -->
    <div class="table-wrapper">
      <div class="table-scroll-container">
        <table border="1" cellpadding="0" cellspacing="0">
          <thead>
            <tr>
              <th 
                :style="{width: columnWidths.table2[0] + 'px'}" 
                class="resizable-header"
                :data-table="2"
                :data-col="0"
              >
                尺寸型号
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
              <th 
                :style="{width: columnWidths.table2[1] + 'px'}" 
                class="resizable-header"
                :data-table="2"
                :data-col="1"
              >
                倒角前值1
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
              <th 
                :style="{width: columnWidths.table2[2] + 'px'}" 
                class="resizable-header"
                :data-table="2"
                :data-col="2"
              >
                倒角前值2
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
              <th 
                :style="{width: columnWidths.table2[3] + 'px'}" 
                class="resizable-header"
                :data-table="2"
                :data-col="3"
              >
                外观1
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
              <th 
                :style="{width: columnWidths.table2[4] + 'px'}" 
                class="resizable-header"
                :data-table="2"
                :data-col="4"
              >
                外观2
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
              <th 
                :style="{width: columnWidths.table2[5] + 'px'}" 
                class="resizable-header"
                :data-table="2"
                :data-col="5"
              >
                倒角后值1
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
              <th 
                :style="{width: columnWidths.table2[6] + 'px'}" 
                class="resizable-header"
                :data-table="2"
                :data-col="6"
              >
                倒角后值2
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
              <th 
                :style="{width: columnWidths.table2[7] + 'px'}" 
                class="resizable-header"
                :data-table="2"
                :data-col="7"
              >
                倒角下尺寸
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
              <th 
                :style="{width: columnWidths.table2[8] + 'px'}" 
                class="resizable-header"
                :data-table="2"
                :data-col="8"
              >
                R值
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
            </tr>
          </thead>
          <tbody>
            <!-- 数据行 -->
            <tr>
              <td :rowspan="tableData2.length" class="merged-cell">
                <input 
                  type="text" 
                  v-model="mergedData2.sizeModel" 
                  class="cell-input merged-input"
                  placeholder="输入型号"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="tableData2[0].beforeChamfer1" 
                  class="cell-input"
                  placeholder="值1"
                  @keyup.enter="handleEnter('table2', 0, 'beforeChamfer1')"
                  @input="calculateStatistics('table2')"
                  :ref="(el) => setRef('table2', 0, 'beforeChamfer1', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="tableData2[0].beforeChamfer2" 
                  class="cell-input"
                  placeholder="值2"
                  @keyup.enter="handleEnter('table2', 0, 'beforeChamfer2')"
                  @input="calculateStatistics('table2')"
                  :ref="(el) => setRef('table2', 0, 'beforeChamfer2', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="tableData2[0].appearance1" 
                  class="cell-input"
                  placeholder="外观1"
                  @keyup.enter="handleEnter('table2', 0, 'appearance1')"
                  :ref="(el) => setRef('table2', 0, 'appearance1', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="tableData2[0].appearance2" 
                  class="cell-input"
                  placeholder="外观2"
                  @keyup.enter="handleEnter('table2', 0, 'appearance2')"
                  :ref="(el) => setRef('table2', 0, 'appearance2', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="tableData2[0].afterChamfer1" 
                  class="cell-input"
                  placeholder="值1"
                  @keyup.enter="handleEnter('table2', 0, 'afterChamfer1')"
                  @input="calculateStatistics('table2')"
                  :ref="(el) => setRef('table2', 0, 'afterChamfer1', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="tableData2[0].afterChamfer2" 
                  class="cell-input"
                  placeholder="值2"
                  @keyup.enter="handleEnter('table2', 0, 'afterChamfer2')"
                  @input="calculateStatistics('table2')"
                  :ref="(el) => setRef('table2', 0, 'afterChamfer2', el)"
                >
              </td>
              <td :rowspan="tableData2.length" class="merged-cell">
                <input 
                  type="text" 
                  v-model="mergedData2.chamferLower" 
                  class="cell-input merged-input"
                  placeholder="尺寸"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="tableData2[0].rValue" 
                  class="cell-input"
                  placeholder="R"
                  @keyup.enter="handleEnter('table2', 0, 'rValue')"
                  :ref="(el) => setRef('table2', 0, 'rValue', el)"
                >
              </td>
            </tr>
            
            <tr v-for="(row, rowIndex) in tableData2.slice(1)" :key="'table2-' + rowIndex">
              <td>
                <input 
                  type="text" 
                  v-model="row.beforeChamfer1" 
                  class="cell-input"
                  placeholder="值1"
                  @keyup.enter="handleEnter('table2', rowIndex + 1, 'beforeChamfer1')"
                  @input="calculateStatistics('table2')"
                  :ref="(el) => setRef('table2', rowIndex + 1, 'beforeChamfer1', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="row.beforeChamfer2" 
                  class="cell-input"
                  placeholder="值2"
                  @keyup.enter="handleEnter('table2', rowIndex + 1, 'beforeChamfer2')"
                  @input="calculateStatistics('table2')"
                  :ref="(el) => setRef('table2', rowIndex + 1, 'beforeChamfer2', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="row.appearance1" 
                  class="cell-input"
                  placeholder="外观1"
                  @keyup.enter="handleEnter('table2', rowIndex + 1, 'appearance1')"
                  :ref="(el) => setRef('table2', rowIndex + 1, 'appearance1', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="row.appearance2" 
                  class="cell-input"
                  placeholder="外观2"
                  @keyup.enter="handleEnter('table2', rowIndex + 1, 'appearance2')"
                  :ref="(el) => setRef('table2', rowIndex + 1, 'appearance2', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="row.afterChamfer1" 
                  class="cell-input"
                  placeholder="值1"
                  @keyup.enter="handleEnter('table2', rowIndex + 1, 'afterChamfer1')"
                  @input="calculateStatistics('table2')"
                  :ref="(el) => setRef('table2', rowIndex + 1, 'afterChamfer1', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="row.afterChamfer2" 
                  class="cell-input"
                  placeholder="值2"
                  @keyup.enter="handleEnter('table2', rowIndex + 1, 'afterChamfer2')"
                  @input="calculateStatistics('table2')"
                  :ref="(el) => setRef('table2', rowIndex + 1, 'afterChamfer2', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="row.rValue" 
                  class="cell-input"
                  placeholder="R"
                  @keyup.enter="handleEnter('table2', rowIndex + 1, 'rValue')"
                  :ref="(el) => setRef('table2', rowIndex + 1, 'rValue', el)"
                >
              </td>
            </tr>

            <tr class="stats-row">
              <td></td>
              <td colspan="2" class="before-stats">
                <div class="stat-group">
                  <span class="stat-item">均值: {{ stats.table2.before.mean.toFixed(2) }}</span>
                  <span class="stat-item">最大值: {{ stats.table2.before.max }}</span>
                  <span class="stat-item">最小值: {{ stats.table2.before.min }}</span>
                </div>
              </td>
              <td colspan="2"></td>
              <td colspan="2" class="after-stats">
                <div class="stat-group">
                  <span class="stat-item">均值: {{ stats.table2.after.mean.toFixed(2) }}</span>
                  <span class="stat-item">最大值: {{ stats.table2.after.max }}</span>
                  <span class="stat-item">最小值: {{ stats.table2.after.min }}</span>
                </div>
              </td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <div class="table-actions">
        <button @click="addRow('table2')" class="action-btn add-btn">添加行</button>
        <button @click="removeRow('table2')" class="action-btn remove-btn" :disabled="tableData2.length <= 1">删除最后一行</button>
      </div>
    </div>

    <!-- 第三个表格 -->
    <div class="table-wrapper">
      <div class="table-scroll-container">
        <table border="1" cellpadding="0" cellspacing="0">
          <thead>
            <tr>
              <th 
                :style="{width: columnWidths.table3[0] + 'px'}" 
                class="resizable-header"
                :data-table="3"
                :data-col="0"
              >
                尺寸型号
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
              <th 
                :style="{width: columnWidths.table3[1] + 'px'}" 
                class="resizable-header"
                :data-table="3"
                :data-col="1"
              >
                倒角前值1
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
              <th 
                :style="{width: columnWidths.table3[2] + 'px'}" 
                class="resizable-header"
                :data-table="3"
                :data-col="2"
              >
                倒角前值2
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
              <th 
                :style="{width: columnWidths.table3[3] + 'px'}" 
                class="resizable-header"
                :data-table="3"
                :data-col="3"
              >
                外观1
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
              <th 
                :style="{width: columnWidths.table3[4] + 'px'}" 
                class="resizable-header"
                :data-table="3"
                :data-col="4"
              >
                外观2
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
              <th 
                :style="{width: columnWidths.table3[5] + 'px'}" 
                class="resizable-header"
                :data-table="3"
                :data-col="5"
              >
                倒角后值1
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
              <th 
                :style="{width: columnWidths.table3[6] + 'px'}" 
                class="resizable-header"
                :data-table="3"
                :data-col="6"
              >
                倒角后值2
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
              <th 
                :style="{width: columnWidths.table3[7] + 'px'}" 
                class="resizable-header"
                :data-table="3"
                :data-col="7"
              >
                倒角下尺寸
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
              <th 
                :style="{width: columnWidths.table3[8] + 'px'}" 
                class="resizable-header"
                :data-table="3"
                :data-col="8"
              >
                R值
                <div class="resize-handle" @mousedown="startResize"></div>
              </th>
            </tr>
          </thead>
          <tbody>
            <!-- 数据行 -->
            <tr>
              <td :rowspan="tableData3.length" class="merged-cell">
                <input 
                  type="text" 
                  v-model="mergedData3.sizeModel" 
                  class="cell-input merged-input"
                  placeholder="输入型号"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="tableData3[0].beforeChamfer1" 
                  class="cell-input"
                  placeholder="值1"
                  @keyup.enter="handleEnter('table3', 0, 'beforeChamfer1')"
                  @input="calculateStatistics('table3')"
                  :ref="(el) => setRef('table3', 0, 'beforeChamfer1', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="tableData3[0].beforeChamfer2" 
                  class="cell-input"
                  placeholder="值2"
                  @keyup.enter="handleEnter('table3', 0, 'beforeChamfer2')"
                  @input="calculateStatistics('table3')"
                  :ref="(el) => setRef('table3', 0, 'beforeChamfer2', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="tableData3[0].appearance1" 
                  class="cell-input"
                  placeholder="外观1"
                  @keyup.enter="handleEnter('table3', 0, 'appearance1')"
                  :ref="(el) => setRef('table3', 0, 'appearance1', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="tableData3[0].appearance2" 
                  class="cell-input"
                  placeholder="外观2"
                  @keyup.enter="handleEnter('table3', 0, 'appearance2')"
                  :ref="(el) => setRef('table3', 0, 'appearance2', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="tableData3[0].afterChamfer1" 
                  class="cell-input"
                  placeholder="值1"
                  @keyup.enter="handleEnter('table3', 0, 'afterChamfer1')"
                  @input="calculateStatistics('table3')"
                  :ref="(el) => setRef('table3', 0, 'afterChamfer1', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="tableData3[0].afterChamfer2" 
                  class="cell-input"
                  placeholder="值2"
                  @keyup.enter="handleEnter('table3', 0, 'afterChamfer2')"
                  @input="calculateStatistics('table3')"
                  :ref="(el) => setRef('table3', 0, 'afterChamfer2', el)"
                >
              </td>
              <td :rowspan="tableData3.length" class="merged-cell">
                <input 
                  type="text" 
                  v-model="mergedData3.chamferLower" 
                  class="cell-input merged-input"
                  placeholder="尺寸"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="tableData3[0].rValue" 
                  class="cell-input"
                  placeholder="R"
                  @keyup.enter="handleEnter('table3', 0, 'rValue')"
                  :ref="(el) => setRef('table3', 0, 'rValue', el)"
                >
              </td>
            </tr>
            
            <tr v-for="(row, rowIndex) in tableData3.slice(1)" :key="'table3-' + rowIndex">
              <td>
                <input 
                  type="text" 
                  v-model="row.beforeChamfer1" 
                  class="cell-input"
                  placeholder="值1"
                  @keyup.enter="handleEnter('table3', rowIndex + 1, 'beforeChamfer1')"
                  @input="calculateStatistics('table3')"
                  :ref="(el) => setRef('table3', rowIndex + 1, 'beforeChamfer1', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="row.beforeChamfer2" 
                  class="cell-input"
                  placeholder="值2"
                  @keyup.enter="handleEnter('table3', rowIndex + 1, 'beforeChamfer2')"
                  @input="calculateStatistics('table3')"
                  :ref="(el) => setRef('table3', rowIndex + 1, 'beforeChamfer2', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="row.appearance1" 
                  class="cell-input"
                  placeholder="外观1"
                  @keyup.enter="handleEnter('table3', rowIndex + 1, 'appearance1')"
                  :ref="(el) => setRef('table3', rowIndex + 1, 'appearance1', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="row.appearance2" 
                  class="cell-input"
                  placeholder="外观2"
                  @keyup.enter="handleEnter('table3', rowIndex + 1, 'appearance2')"
                  :ref="(el) => setRef('table3', rowIndex + 1, 'appearance2', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="row.afterChamfer1" 
                  class="cell-input"
                  placeholder="值1"
                  @keyup.enter="handleEnter('table3', rowIndex + 1, 'afterChamfer1')"
                  @input="calculateStatistics('table3')"
                  :ref="(el) => setRef('table3', rowIndex + 1, 'afterChamfer1', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="row.afterChamfer2" 
                  class="cell-input"
                  placeholder="值2"
                  @keyup.enter="handleEnter('table3', rowIndex + 1, 'afterChamfer2')"
                  @input="calculateStatistics('table3')"
                  :ref="(el) => setRef('table3', rowIndex + 1, 'afterChamfer2', el)"
                >
              </td>
              <td>
                <input 
                  type="text" 
                  v-model="row.rValue" 
                  class="cell-input"
                  placeholder="R"
                  @keyup.enter="handleEnter('table3', rowIndex + 1, 'rValue')"
                  :ref="(el) => setRef('table3', rowIndex + 1, 'rValue', el)"
                >
              </td>
            </tr>

            <tr class="stats-row">
              <td></td>
              <td colspan="2" class="before-stats">
                <div class="stat-group">
                  <span class="stat-item">均值: {{ stats.table3.before.mean.toFixed(2) }}</span>
                  <span class="stat-item">最大值: {{ stats.table3.before.max }}</span>
                  <span class="stat-item">最小值: {{ stats.table3.before.min }}</span>
                </div>
              </td>
              <td colspan="2"></td>
              <td colspan="2" class="after-stats">
                <div class="stat-group">
                  <span class="stat-item">均值: {{ stats.table3.after.mean.toFixed(2) }}</span>
                  <span class="stat-item">最大值: {{ stats.table3.after.max }}</span>
                  <span class="stat-item">最小值: {{ stats.table3.after.min }}</span>
                </div>
              </td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <div class="table-actions">
        <button @click="addRow('table3')" class="action-btn add-btn">添加行</button>
        <button @click="removeRow('table3')" class="action-btn remove-btn" :disabled="tableData3.length <= 1">删除最后一行</button>
      </div>
    </div>

    <!-- 底部操作按钮 -->
    <div class="bottom-actions">
      <button @click="saveAllData" class="bottom-btn save-btn">保存</button>
      <button @click="clearAllData" class="bottom-btn clear-btn">清空</button>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick, onMounted } from 'vue';

// 存储所有输入框的引用
const inputRefs = ref({
  table1: {},
  table2: {},
  table3: {}
});

// 列宽设置 - 缩小初始宽度
const columnWidths = ref({
  table1: [60, 50, 50, 50, 50, 50, 50, 70, 40],  // 各列初始宽度
  table2: [60, 50, 50, 50, 50, 50, 50, 70, 40],
  table3: [60, 50, 50, 50, 50, 50, 50, 70, 40]
});

// 拖拽状态管理
const resizeState = ref({
  isResizing: false,
  table: 0,
  col: 0,
  startX: 0,
  startWidth: 0
});

// 用于存储保存的数据（包括统计数据）
const savedData = ref(null);

// 存储当前统计数据
const stats = ref({
  table1: {
    before: { mean: 0, max: 0, min: 0 },
    after: { mean: 0, max: 0, min: 0 }
  },
  table2: {
    before: { mean: 0, max: 0, min: 0 },
    after: { mean: 0, max: 0, min: 0 }
  },
  table3: {
    before: { mean: 0, max: 0, min: 0 },
    after: { mean: 0, max: 0, min: 0 }
  }
});

// 设置输入框引用
const setRef = (tableName, rowIndex, field, el) => {
  if (el) {
    if (!inputRefs.value[tableName][rowIndex]) {
      inputRefs.value[tableName][rowIndex] = {};
    }
    inputRefs.value[tableName][rowIndex][field] = el;
  }
};

// 初始化表格数据
const tableData1 = ref([
  {
    beforeChamfer1: '',
    beforeChamfer2: '',
    appearance1: '',
    appearance2: '',
    afterChamfer1: '',
    afterChamfer2: '',
    rValue: ''
  }
]);
const mergedData1 = ref({ sizeModel: '', chamferLower: '' });

const tableData2 = ref([
  {
    beforeChamfer1: '',
    beforeChamfer2: '',
    appearance1: '',
    appearance2: '',
    afterChamfer1: '',
    afterChamfer2: '',
    rValue: ''
  }
]);
const mergedData2 = ref({ sizeModel: '', chamferLower: '' });

const tableData3 = ref([
  {
    beforeChamfer1: '',
    beforeChamfer2: '',
    appearance1: '',
    appearance2: '',
    afterChamfer1: '',
    afterChamfer2: '',
    rValue: ''
  }
]);
const mergedData3 = ref({ sizeModel: '', chamferLower: '' });

// 创建新行数据
const createNewRow = () => ({
  beforeChamfer1: '',
  beforeChamfer2: '',
  appearance1: '',
  appearance2: '',
  afterChamfer1: '',
  afterChamfer2: '',
  rValue: ''
});

// 添加新行
const addRow = (tableName) => {
  if (tableName === 'table1') {
    tableData1.value.push(createNewRow());
  } else if (tableName === 'table2') {
    tableData2.value.push(createNewRow());
  } else if (tableName === 'table3') {
    tableData3.value.push(createNewRow());
  }
  
  nextTick(() => calculateStatistics(tableName));
};

// 删除最后一行
const removeRow = (tableName) => {
  if (tableName === 'table1' && tableData1.value.length > 1) {
    tableData1.value.pop();
  } else if (tableName === 'table2' && tableData2.value.length > 1) {
    tableData2.value.pop();
  } else if (tableName === 'table3' && tableData3.value.length > 1) {
    tableData3.value.pop();
  }
  
  calculateStatistics(tableName);
};

// 处理回车事件
const handleEnter = (tableName, rowIndex, field) => {
  const tableData = tableName === 'table1' ? tableData1.value : 
                   tableName === 'table2' ? tableData2.value : 
                   tableData3.value;
  
  if (rowIndex < tableData.length - 1) {
    focusInput(tableName, rowIndex + 1, field);
  } else {
    addRow(tableName);
    nextTick(() => {
      focusInput(tableName, rowIndex + 1, field);
    });
  }
};

// 聚焦到指定输入框
const focusInput = (tableName, rowIndex, field) => {
  nextTick(() => {
    const inputElement = inputRefs.value[tableName]?.[rowIndex]?.[field];
    if (inputElement) inputElement.focus();
  });
};

// 计算统计数据
const calculateStatistics = (tableName) => {
  const tableData = tableName === 'table1' ? tableData1.value : 
                   tableName === 'table2' ? tableData2.value : 
                   tableData3.value;
                   
  const beforeValues = [];
  const afterValues = [];
  
  tableData.forEach(row => {
    if (row.beforeChamfer1 && !isNaN(parseFloat(row.beforeChamfer1))) {
      beforeValues.push(parseFloat(row.beforeChamfer1));
    }
    if (row.beforeChamfer2 && !isNaN(parseFloat(row.beforeChamfer2))) {
      beforeValues.push(parseFloat(row.beforeChamfer2));
    }
    
    if (row.afterChamfer1 && !isNaN(parseFloat(row.afterChamfer1))) {
      afterValues.push(parseFloat(row.afterChamfer1));
    }
    if (row.afterChamfer2 && !isNaN(parseFloat(row.afterChamfer2))) {
      afterValues.push(parseFloat(row.afterChamfer2));
    }
  });
  
  let beforeStats = { mean: 0, max: 0, min: 0 };
  if (beforeValues.length > 0) {
    const sum = beforeValues.reduce((acc, val) => acc + val, 0);
    beforeStats.mean = sum / beforeValues.length;
    beforeStats.max = Math.max(...beforeValues);
    beforeStats.min = Math.min(...beforeValues);
  }
  
  let afterStats = { mean: 0, max: 0, min: 0 };
  if (afterValues.length > 0) {
    const sum = afterValues.reduce((acc, val) => acc + val, 0);
    afterStats.mean = sum / afterValues.length;
    afterStats.max = Math.max(...afterValues);
    afterStats.min = Math.min(...afterValues);
  }
  
  stats.value[tableName].before = beforeStats;
  stats.value[tableName].after = afterStats;
};

// 开始调整列宽
const startResize = (e) => {
  e.preventDefault();
  const header = e.currentTarget.parentElement;
  const tableNum = parseInt(header.dataset.table);
  const colNum = parseInt(header.dataset.col);
  
  // 记录初始状态
  resizeState.value = {
    isResizing: true,
    table: tableNum,
    col: colNum,
    startX: e.pageX,
    startWidth: columnWidths.value[`table${tableNum}`][colNum]
  };
  
  // 添加事件监听
  document.addEventListener('mousemove', handleResize);
  document.addEventListener('mouseup', stopResize);
};

// 处理调整列宽
const handleResize = (e) => {
  if (!resizeState.value.isResizing) return;
  
  const tableKey = `table${resizeState.value.table}`;
  const deltaX = e.pageX - resizeState.value.startX;
  // 限制最小宽度为30px，防止过窄
  const newWidth = Math.max(30, resizeState.value.startWidth + deltaX);
  
  columnWidths.value[tableKey][resizeState.value.col] = newWidth;
};

// 停止调整列宽
const stopResize = () => {
  if (resizeState.value.isResizing) {
    resizeState.value.isResizing = false;
    document.removeEventListener('mousemove', handleResize);
    document.removeEventListener('mouseup', stopResize);
  }
};

// 保存所有数据
const saveAllData = () => {
  calculateStatistics('table1');
  calculateStatistics('table2');
  calculateStatistics('table3');
  
  savedData.value = {
    saveTime: new Date().toLocaleString(),
    table1: {
      merged: JSON.parse(JSON.stringify(mergedData1.value)),
      rows: JSON.parse(JSON.stringify(tableData1.value)),
      stats: JSON.parse(JSON.stringify(stats.value.table1))
    },
    table2: {
      merged: JSON.parse(JSON.stringify(mergedData2.value)),
      rows: JSON.parse(JSON.stringify(tableData2.value)),
      stats: JSON.parse(JSON.stringify(stats.value.table2))
    },
    table3: {
      merged: JSON.parse(JSON.stringify(mergedData3.value)),
      rows: JSON.parse(JSON.stringify(tableData3.value)),
      stats: JSON.parse(JSON.stringify(stats.value.table3))
    }
  };
  
  console.log('保存的数据:', savedData.value);
  alert('数据保存成功！');
};

// 清空所有数据
const clearAllData = () => {
  if (confirm('确定要清空所有表格数据吗？')) {
    mergedData1.value = { sizeModel: '', chamferLower: '' };
    tableData1.value = [createNewRow()];
    
    mergedData2.value = { sizeModel: '', chamferLower: '' };
    tableData2.value = [createNewRow()];
    
    mergedData3.value = { sizeModel: '', chamferLower: '' };
    tableData3.value = [createNewRow()];
    
    stats.value = {
      table1: { before: { mean: 0, max: 0, min: 0 }, after: { mean: 0, max: 0, min: 0 } },
      table2: { before: { mean: 0, max: 0, min: 0 }, after: { mean: 0, max: 0, min: 0 } },
      table3: { before: { mean: 0, max: 0, min: 0 }, after: { mean: 0, max: 0, min: 0 } }
    };
    
    savedData.value = null;
  }
};

// 初始化
onMounted(() => {
  calculateStatistics('table1');
  calculateStatistics('table2');
  calculateStatistics('table3');
});
</script>

<style scoped>
.tables-container {
  margin: 20px;
  padding: 10px;
}

.table-wrapper {
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 表格滚动容器 */
.table-scroll-container {
  overflow-x: auto;
  min-width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

th, td {
  text-align: center;
  padding: 2px;  /* 减少内边距 */
  border: 1px solid #ccc;
  white-space: nowrap;  /* 防止内容换行 */
  overflow: hidden;
  text-overflow: ellipsis;  /* 内容溢出显示省略号 */
}

th {
  background-color: #f5f5f5;
  font-weight: bold;
  padding: 4px 2px;
  position: relative;  /* 用于拖拽手柄定位 */
}

/* 单元格输入框样式 */
.cell-input {
  width: 100%;
  padding: 3px 2px;  /* 减少内边距 */
  border: none;
  outline: none;
  box-sizing: border-box;
  text-align: center;
  font-size: 13px;  /* 缩小字体 */
  min-height: 24px;  /* 缩小高度 */
}

.cell-input:focus {
  background-color: #f0f8ff;
  border: 1px solid #99ccff;
}

.merged-cell {
  vertical-align: middle;
}

.merged-input {
  height: 100%;
  min-height: 40px;  /* 缩小合并单元格高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 2px;
}

/* 列宽调整手柄 */
.resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  cursor: col-resize;
  background-color: transparent;
}

.resize-handle:hover {
  background-color: #1890ff;  /* 悬停时显示蓝色 */
}

/* 拖拽时的鼠标样式 */
body:has(.resize-handle:active) {
  cursor: col-resize;
}

.table-actions {
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.action-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.add-btn {
  background-color: #42b983;
  color: white;
}

.add-btn:hover {
  background-color: #359e75; 
}

.remove-btn {
  background-color: #f44336;
  color: white;
}

.remove-btn:hover {
  background-color: #d32f2f;
}

.remove-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.stats-row {
  font-weight: bold;
  height: 30px;  /* 缩小统计行高度 */
}

.before-stats {
  background-color: #e6f2ff;
  border-top: 2px solid #1e88e5;
}

.after-stats {
  background-color: #e6f7f0;
  border-top: 2px solid #26a69a;
}

.stat-group {
  display: flex;
  justify-content: center;
  gap: 10px;  /* 缩小统计项间距 */
  align-items: center;
  height: 100%;
  font-size: 12px;  /* 缩小统计文字 */
}

.stat-item {
  padding: 1px 3px;
  border-radius: 2px;
}

.bottom-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.bottom-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s;
  font-weight: bold;
}

.save-btn {
  background-color: #4caf50;
  color: white;
}

.clear-btn {
  background-color: #ff9800;
  color: white;
}
</style>
